<template>
	<div class="sort-item" @click="onclick" :class="{ 'sort-active-color': active && order}">
		<div class="sort-item-name">{{ title }}</div>
		<div class="sort-item-icon">
			<i class="iconfont icon-f111" :class="{ 'sort-active-color': order === 'desc' }"></i>
			<i class="iconfont icon-f11" :class="{ 'sort-active-color': order === 'asc' }"></i>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: '未设置'
		},
		active: {
			type: Boolean,
			default: false
		},
		index: {
			type: [String, Number],
			default: ''
		},
		order: {
			type: [String, Boolean],
			default: ''
		}
	},
	methods: {
		onclick() {
			if (this.order === '') {
				this.$emit('changeSort', this.index, 'desc');
			} else if (this.order === 'desc') {
				this.$emit('changeSort', this.index, 'asc');
			} else {
				this.$emit('changeSort', this.index, '');
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.sort-item {
	width: 200px;
	color: #727272;
	@include flexBox(center, center);

	&.sort-active-color {
		color: $main-color;
		.iconfont {
			color: $main-color;
		}
	}

	.sort-item-name {
		font-size: 26px;
	}

	.sort-item-icon {
		margin-left: 4px;
		line-height: 6px;
		@include flexBox(center, null, column);
		i {
			margin: 2px 0;
			opacity: 1;
			transition: 0.5s;
			color: #c8c8c8;
		}
		.sort-active-color {
			opacity: 0;
			color: $main-color;
		}
	}
}
</style>
